//各学校在国内外顶级期刊、国内外重要期刊和其他重要期刊发表的论文数
import React, { useState, useEffect } from 'react';
import ReactDOM from 'react-dom';
import { Column } from '@ant-design/plots';

const DemoColumn = () => {
  const [data, setData] = useState([]);

  useEffect(() => {
    asyncFetch();
  }, []);

  const asyncFetch = () => {
    setData([
      {"school":"南昌大学","jour_level": "国内外顶级期刊","paper":150},
      {"school":"南昌大学","jour_level": "国内外重要期刊","paper":170},
      {"school":"南昌大学","jour_level": "其他重要期刊","paper":180},

      {"school":"南昌航空大学","jour_level": "国内外顶级期刊","paper":50},
      {"school":"南昌航空大学","jour_level": "国内外重要期刊","paper":90},
      {"school":"南昌航空大学","jour_level": "其他重要期刊","paper":140},

      {"school":"江西财经大学","jour_level": "国内外顶级期刊","paper":100},
      {"school":"江西财经大学","jour_level": "国内外重要期刊","paper":70},
      {"school":"江西财经大学","jour_level": "其他重要期刊","paper":80},

      {"school":"江西师范大学","jour_level": "国内外顶级期刊","paper":90},
      {"school":"江西师范大学","jour_level": "国内外重要期刊","paper":105},
      {"school":"江西师范大学","jour_level": "其他重要期刊","paper":80},

      {"school":"江西农业大学","jour_level": "国内外顶级期刊","paper":110},
      {"school":"江西农业大学","jour_level": "国内外重要期刊","paper":120},
      {"school":"江西农业大学","jour_level": "其他重要期刊","paper":115},

      {"school":"江西理工大学","jour_level": "国内外顶级期刊","paper":70},
      {"school":"江西理工大学","jour_level": "国内外重要期刊","paper":150},
      {"school":"江西理工大学","jour_level": "其他重要期刊","paper":100},

      {"school":"东华理工大学","jour_level": "国内外顶级期刊","paper":80},
      {"school":"东华理工大学","jour_level": "国内外重要期刊","paper":120},
      {"school":"东华理工大学","jour_level": "其他重要期刊","paper":130},

      {"school":"华东交通大学","jour_level": "国内外顶级期刊","paper":60},
      {"school":"华东交通大学","jour_level": "国内外重要期刊","paper":100},
      {"school":"华东交通大学","jour_level": "其他重要期刊","paper":120},
    ])
  };
  const config = {
    data,
    xField: 'school',
    yField: 'paper',
    seriesField: 'jour_level',
    isGroup: 'true',
    maxColumnWidth:50,
    yAxis: {
      label: {
        style: {
          fontSize: 16
        }
      }
    },
    xAxis: {
      label: {
        style: {
          fontSize: 16
        }
      }
    },
    legend: {
      position: 'top-left',
      itemName: {style: {fontSize: 18}},
    },
  };

  return <Column {...config} />;
};

export default DemoColumn
